<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@include file="../Head.jsp"%>
<style type="text/css">
.producttypes {
	width: 89%;
	float: left;
	color: #369;
}

.producttypes li {
	float: left;
	margin: 5px 5px;
	cursor: pointer;
	line-height: 15px;
	cursor: pointer;
	line-height: 15px;
	padding: 2px 5px;
}

.producttypes .active {
	background-color: #FF6600; 
	color: white;
}
</style>
<div class="Body">
	<!-- <div class="block h10"></div> -->
	<div class="baseWidth block">
		<div class="fl h30  " style="line-height: 30px; width: inherit;">
			<div class="menuline fl ml10">
				<ul>
					<li class="home">&nbsp;</li>
					<li class="next">&nbsp;</li>
					<li>首页</li>
					<li class="next">&nbsp;</li>
					<li>支付产品</li>
				</ul>
			</div>
		</div>
		<div class="clear block "></div>
		<div class="pannel radius5 shadown bor">
			<div class="pannel-menu h30 pm6">
				<strong>支付产品列表</strong>
				<div class="fr mr10" style="line-height: 40px">
					<a href="/file/shenqingbiao.doc" target="_blank">申请加入导航</a>
				</div>
				<div class="fr mr40" style="line-height: 25px">
					<div class=" bor  mt7  radius5" style="width: 200px">
						<input type="text" style='border: none; margin: 5px 0px 5px 5px;width: 150px' placeholder="关键字检索" class="input-search" /><span class="btn-search" style="float: right; height: 25px; width: 25px;display: table;"> </span>
					</div>
				</div>
			</div>
			<div class="pannel-body">
				<div class=" pt10 pl10">
					<div style="width: 10%; float: left; text-align: center;">
						<strong>城&nbsp;&nbsp;市：</strong>
					</div>
					<div class="producttypes">
						<ul >
							<li class="active">不限</li><li>上海</li><li>北京</li><li>天津</li><li>重庆</li><li>广东</li><li>辽宁</li><li>湖北</li><li>四川</li><li>陕西</li><li>河北</li><li>山西</li><li>河南</li><li>吉林</li><li>黑龙江</li><li>内蒙古</li><li>江苏</li><li>山东</li><li>安徽</li><li>浙江</li><li>福建</li><li>湖南</li><li>广西</li><li>江西</li><li>贵州</li><li>云南</li><li>西藏</li><li>海南</li><li>甘肃</li><li>宁夏</li><li>青海</li><li>新疆</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class=" pl10" style="border-bottom: 1px solid #D8D8D8;">
					<div style="width: 10%; float: left; text-align: center;">
						<strong>品&nbsp;&nbsp;牌：</strong>
					</div>
					<div class="producttypes">
						<ul ><li class="active">不限</li><li>Visa卡</li><li>万事达卡</li><li>美国运通卡</li><li>蓝鸟卡</li><br/>
						<li>资和信</li><li>OPEN UNION</li><li>通联支付</li><li>杉德</li><li>福卡</li><li>壹卡会</li><li>得仕卡</li><li>山东一卡通</li><li>中付通</li><li>畅购一卡通</li><li>智汇卡</li><li>富友</li></ul>
					</div>
					<div class="clear"></div>
				</div>
				<c:forEach items="${ListLocation}" var="item" varStatus="status">
					<div class="company_listA p10" style="${(status.index+1)!=listCount?'border-bottom: 1px dashed #d0d0d0':''}">
						<div style="width: 10%; float: left; text-align: center;">
							<strong>${item.location}</strong>(${item.size}) <a name="mg_${status.index}" class="mg_a fl" style="position: relative; top: -200px; height: 0px !important; font-size: 0px !important;">&nbsp;s</a>
						</div>
						<div style="width: 89%; float: left;">
							<c:forEach items="${ListCompany[status.index]}" var="item2" varStatus="status2">
								<span style="float: left; width: 33%" class="company_list"> <a class="btn_small btn_36060 fl lh30 op50" href="#" title="加入收藏">&nbsp;</a> <a href="${item2.web_site}" target="_blank"
									class="_blank fl lh30 " title="点击跳到  ${item2.company_name} 首页" style="max-width: 220px; max-height: 30px; overflow: hidden;"><div class="c_name">${item2.company_name}</div></a> <a
									class="btn_small btn_32482 fl lh30 op10 ml10" href="/navigation/NavigationInfo/${item2.company_id}.html" title="查看档案">&nbsp;</a> <a class="btn_small btn_28550 fl lh30 op10" href="#"
									title="新闻报告">&nbsp;</a>
								</span>
							</c:forEach>
						</div>
						<div class="clear"></div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$(".input-search").keyup(function() {
			var tval = $(this).val();
			if (tval.length > 0) {
				$(".company_listA").each(function() {
					var inx = 0;
					$(this).find(".c_name").each(function() {
						if ($(this).text().indexOf(tval) >= 0) {
							++inx;
							$(this).parent().parent().show();
						} else {
							$(this).parent().parent().hide();
						}
					});
					if (inx == 0)
						$(this).hide();
					else
						$(this).show();
				});
			} else {
				$(".company_listA").show();
				$(".c_name").parent().parent().shweow();
			}
		});

		$("a[href^=#mg_]").click(function() {
			var mg_name = $(this).attr("href").substring(1);
			var objDiv = $("a[name=" + mg_name + "]").parent().parent();
			var i = 0;
			clearInterval(timer);
			var timer = null;
			var bgc = objDiv.css("background-color");
			timer = setInterval(function() {
				objDiv.css("background-color", i++ % 2 ? "#FFFFC6" : bgc);//还是有收获的，这个写法比if..else想必简单了好多
				i > 8 && clearInterval(timer);//这个短路用的经典啊
			}, 150);
		});
	});
</script>
<div class="h20"></div>
<%@include file="../Bottom.jsp"%>
